<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav class="main-nav">
      <router-link to="/">首页</router-link>
      <router-link to="/about">个人简介</router-link>
      <router-link to="/todolist">待办事项</router-link>
      <!-- 登录状态展示与操作 -->
      <div class="user-info" v-if="userStore.isAuthenticated">
        欢迎，{{ userStore.user.username }} | 
        <button @click="handleLogout">登出</button>
      </div>
      <router-link to="/login" class="login-link" v-else>登录</router-link>
    </nav>

    <!-- Git 仓库链接 -->
    <div class="git-link">
      <a href="https://gitee.com/dmsllll/todolist-login" target="_blank">
        项目 Git 仓库
      </a>
    </div>

    <!-- 路由视图：渲染匹配的组件 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useUserStore } from './store/user.js'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<style scoped>
#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.main-nav {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.main-nav a {
  text-decoration: none;
  color: #333;
  padding: 6px 12px;
  border-radius: 4px;
}
.main-nav a:hover {
  background-color: #f5f5f5;
}
.user-info {
  margin-left: auto;
}
.login-link {
  margin-left: auto;
  background-color: #42b983;
  color: white;
}
.git-link {
  margin: 10px 0;
  color: #666;
}
.git-link a {
  color: #42b983;
  text-decoration: none;
}
</style>